<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Purple Admin</title>
    <link th:include="inc_css.html">
    <link th:include="inc.html">
    <style>
        .lheight {
            line-height: 35px;
        }
    </style>
</head>
<body style="">
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-clock-o"></i> 定时器管理</h1>
            <p>该功能负责动态修改定时器配置信息</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="javascript:return;">定时器列表</a></li>
        </ul>
    </div>
    <div class="row" id="message" style="display:none">
        <div class="col-md-12">
            <div class="tile" th:style="'background:#'+${color}">
                <div class="tile-body" th:text="${message}" style="color: #FFFFFF"></div>
            </div>
        </div>
    </div>
    <div class="row" id="add" style="display:none">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title">新增定时器</h3>
                <form class="form-horizontal" action="/operation/saveTimer" method="post">
                    <div class="tile-body">
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">说明</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder="请输入定时器备注说明"
                                       name="name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">请求地址</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder="请填写转发地址eg:http://ip:port"
                                       name="uri">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">请求时间</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder="请输入cron表达式"
                                       name="cron">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">是否有效</label>
                            <div class="col-md-6 lheight">
                                <input class="" type="radio" name="status" value="1" checked="">有效
                                <input class="" type="radio" name="status" value="2">无效
                            </div>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-3">
                                <button class="btn btn-primary" type="submit"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>新增
                                </button>&nbsp;&nbsp;&nbsp;<a class="btn btn-secondary" href="#" onclick="cancel()"><i
                                    class="fa fa-fw fa-lg fa-times-circle"></i>取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--<div class="clearix"></div>-->
    </div>
    <div class="row" id="update" style="display:none">
        <div class="col-md-12">
            <div class="tile">
                <h3 class="tile-title">修改定时器</h3>
                <form class="form-horizontal" action="/operation/updateTimer" method="post" id="update_form">
                    <div class="tile-body">
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">id</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" value="" name="update_id"
                                       id="update_id"
                                       disabled="">
                                <input class="form-control col-md-8" type="hidden" value="" name="id" id="update_id_2">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">说明</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder=""
                                       name="name" id="update_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">请求地址</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder="" name="uri"
                                       id="update_uri">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">请求时间</label>
                            <div class="col-md-6">
                                <input class="form-control col-md-6" type="text" placeholder=""
                                       name="cron" id="update_cron">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1 lheight">是否有效</label>
                            <div class="col-md-6 lheight">
                                <input class="" type="radio" name="status" value="1" id="update_status1">有效
                                <input class="" type="radio" name="status" value="2" id="update_status2">无效
                            </div>
                        </div>
                    </div>
                    <div class="tile-footer">
                        <div class="row">
                            <div class="col-md-8 col-md-offset-3">
                                <button class="btn btn-primary" type="submit"><i
                                        class="fa fa-fw fa-lg fa-check-circle"></i>修改
                                </button>
                                &nbsp;&nbsp;&nbsp;
                                <a class="btn btn-secondary" href="#" onclick="cancel()"><i
                                        class="fa fa-fw fa-lg fa-times-circle"></i>取消</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--<div class="clearix"></div>-->
    </div>
    <div class="row" id="list">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <div style="position: absolute;left:200px;top:15px;z-index: 1000">
                        <button class="btn btn-primary" type="button" style="margin-bottom:10px;" onclick="add()">新增
                        </button>
                    </div>
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                        <tr>
                            <th>id</th>
                            <th>说明</th>
                            <th>请求地址</th>
                            <th>时间</th>
                            <th>是否有效</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="timer:${timers}">
                            <td th:text="${timer.id}">Tiger Nixon</td>
                            <td th:text="${timer.name}">System Architect</td>
                            <td th:text="${timer.uri}">Edinburgh</td>
                            <td th:text="${timer.cron}">61</td>
                            <!--<td th:text="${timer.status}">61</td>-->
                            <td th:if="${timer.status == 1}">有效</td>
                            <td th:if="${timer.status == 2}">无效</td>
                            <td style="float: left">
                                <div style="float:left;padding-left: 5px;">
                                    <button class="btn-update btn-info" type="button"
                                            th:onclick="'update_info(\''+${timer.id}+'\')'">修改
                                    </button>
                                </div>
                                <div style="float: left;padding-left: 5px;">
                                    <form action="/operation/delTimer" method="post" th:id="${timer.id}">
                                        <input type="hidden" th:value="${timer.id}" name="delId">
                                        <button class="btn-update btn-info" type="button"
                                                th:onclick="'delTimer(\''+${timer.id}+'\')'">删除
                                        </button>
                                    </form>
                                </div>
                                <div style="float: left;padding-left: 5px;">
                                    <form action="/operation/shutdownTimer" method="post"
                                          th:id="'shutdown'+${timer.id}">
                                        <input type="hidden" th:value="${timer.id}" name="sdId">
                                        <input type="hidden" th:value="${timer.status}" id="shutdown_status">
                                        <button class="btn-update btn-danger" type="button"
                                                th:onclick="'shutdown(\''+${timer.id}+'\')'"
                                                th:if="${timer.status} == 1">关闭
                                        </button>
                                        <button class="btn-update btn-info" type="button"
                                                th:onclick="'shutdown(\''+${timer.id}+'\')'"
                                                th:if="${timer.status} == 2">启动
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Data table plugin-->
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    $('#sampleTable').DataTable();
    $(function () {
        $("#add").hide();
        $("#update").hide();
        $("#message").hide();

        var is_show = [[${is_show}]];
        if (is_show == 1) {
            $("#message").slideDown(1000);
            setTimeout(message_hide, 2000);
        }

    })

    function delTimer(id) {
        if (confirm("是否确认删除？")) {
            $("#" + id).submit();
        }
    }

    function shutdown(id) {
        var shutdown_status = $("#shutdown_status").val();
        if (shutdown_status == 1) {
            if (confirm("是否确认关闭？")) {
                $("#shutdown" + id).submit();
            }
        } else {
            if (confirm("是否确认开启？")) {
                $("#shutdown" + id).submit();
            }
        }
    }

    //隐藏消息
    function message_hide() {
        $("#message").slideUp(1000);
    }

    //添加路由
    function add() {
        $("#add").show();
        $("#list").hide();
    }

    //取消添加修改操作
    function cancel() {
        $("#add").hide();
        $("#update").hide();
        $("#list").show();
    }

    //获取修改信息
    function update_info(id) {
        $("#add").hide();
        $("#list").hide();
        $("#update").show();
        $("#update_id").val(id);
        //发送ajax请求
        $.ajax({
            type: "GET",
            data: {id: id},
            url: "/operation/timerById",
            success: function (data) {
                var obj = JSON.parse(data);
                $("#update_name").val(obj.name);
                $("#update_uri").val(obj.uri);
                $("#update_cron").val(obj.cron);
                $("#update_id_2").val(obj.id);
                if (obj.status == 1) {
                    $("#update_status1").attr('checked', 'checked');
                } else {
                    $("#update_status2").attr('checked', 'checked');
                }
            },
            error: function () {
                alert("获取信息失败");
            }
        });
    }
</script>
</body>
</html>
